<template>
  <div class="content">
    <div class="content_form">
      <el-form ref="form" :model="form" label-width="140px" class="form_item" :rules="rules">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="用户名" prop="nickName">
              <el-input v-model="form.nickName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户账号" prop="userName">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户编码" prop="userCode">
              <el-input disabled v-model="form.userCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-input v-model="form.sex"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户邮箱" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phonenumber">
              <el-input v-model="form.phonenumber"></el-input>
            </el-form-item>
          </el-col>
		  <!--归属部门-->
		  			<el-col :span="12">
		  			            <el-form-item label="归属部门" prop="deptId">
		  			              <treeselect v-model="form.deptId" :options="departmentOptions" placeholder="请选择归属部门" />
		  			            </el-form-item>
		  			          </el-col>
		  <!--归属部门-->
		  
		  <!--角色-->
		  <el-col :span="12">
		              <el-form-item label="角色">
		                <el-select v-model="form.roleIds" multiple placeholder="请选择">
		                  <el-option
		                    v-for="item in roleOptions"
		                    :key="item.roleId"
		                    :label="item.roleName"
		                    :value="item.roleId"
		                    :disabled="item.status == 1"
		                  ></el-option>
		                </el-select>
		              </el-form-item>
		            </el-col>
		  <!--角色-->
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getToken,setToken,removeToken} from '@/utils/auth'
import { userEdit,user_user_display,roles_tree_tree,department_tree_tree} from '@/api/user'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: {
	  Treeselect
  },
  data() {
    return {
        engineering:"",
        engineeringTypeOption:[],
        form:{ 
            nickName: "",
            userName: "",
            userCode :'',     //部门编号
            sex :'',        //用户性别
            email:"",
            phonenumber: "",
            userId:"",
			roleIds:"",
			deptId:undefined
            // token : gettoken()
        },
		departmentOptions:[],
		/********角色管理**********/
		roleOptions:[],
        rules: {
            userName: [
            { required: true, message: "请填写内容", trigger: "blur" }
            ],
        }
        };
    }, 
  created(){
    var userList_data = {token:getToken()}
    // this.modify_display_user()
	/*******加载部门***********/
	department_tree_tree().then((response) => {
			if(response.data.code == 200){
				console.log("我是加载树",response)
				 
					 this.departmentOptions=response.data.depts
			}else{
				this.$message.error(response.data.msg);
			}
	}).catch(() => {
		
	})
	/**********部门*********/
	/********加载角色***********/
	roles_tree_tree().then((response) => {
			if(response.data.code == 200){
				console.log("我是加载角色",response)
				 
					 this.roleOptions=response.data.data
			}else{
				this.$message.error(response.data.msg);
			}
	}).catch(() => {
		
	})
  },
  mounted(){
		// roles_tree_tree().then((response) => {
		// 		if(response.data.code == 200){
		// 			console.log("我是加载角色",response)
					 
		// 				 this.roleOptions=response.data.data
		// 		}else{
		// 			this.$message.error(response.data.msg);
		// 		}
		// }).catch(() => {
			
		// })
		// this.modifyUser()
  },
  methods: {
	  // /********修改回显接口********/
	  modifyUser(){
	  		  console.log("我是111222",this.EngineeringData[0])
	  			
	  	var roleId={
	  			userId:this.EngineeringData[0].userId,
	  			
	  		}
	  	user_user_display(roleId).then((response) => {
	  			console.log("我是后台的回显功能",response)
	  		if(response.data.code == 200){
	  		console.log("我是回显")
	  			this.form=response.data.data
	  		}else{
	  			this.$message.error(response.data.msg);
	  		}
	  	}).catch(() => {
	  		// console.log("我是点击了取消")
	  	})
	  },
	  /********修改回显接口*******/
      // 保存
      editSave() {
      var params_one={
          userId:this.form.userId,
          nickName:this.form.nickName,
          userName:this.form.userName,
          userCode:this.form.userCode,
          sex:this.form.sex,
          email:this.form.email,
          phonenumber:this.form.phonenumber,
		  deptId:this.form.deptId,
		  roleIds:this.form.roleIds
      }
      console.log("222222",params_one)
      // this.$refs["form"].validate(valid => {
          // if (valformid) { 
        userEdit(params_one).then((response) => {
              // console.log("我是成功",response)
			  if(response.data.code == 200){
					this.$message({
						  message: '修改成功',
						  type: 'success'
					 });
			  }else{
			  	this.$message.error(response.data.msg);
			  }
              this.$emit("closeModal", false);
        }).catch(() => {
          // this.loading = false
          // this.$message.error(response.data.msg)
        })
          // } else {
          // return false;
          // }
      // });
      },
	  
  },
  props: ["EngineeringData"],
  mounted: function() {
    //异步加载
    // this.form = this.EngineeringData[0];
  },
  watch: {
    EngineeringData() {
      //数据监视
      this.form = this.EngineeringData[0];
    }
  }
};
</script>
<style scoped>
</style>